Recipes panda
Create composable style variants that are typed and generates the atomic or layer recipe
Panda provides a way to write CSS-in-JS with better performance, developer experience, and composability. One of its key features is the ability to create multi-variant styles with a type-safe runtime API.
codeと感想
code:button.ts
import { cva } from '../styled-system/css'
// これ自身はTS世界の変数なので、型安全だし、持ち運べるのが良いね。
const button = cva({
base: {
display: 'flex'
},
variants: {
// semanticな名前にできるの良いね。
visual: {
solid: { bg: 'red.200', color: 'white' },
outline: { borderWidth: '1px', borderColor: 'red.200' }
},
size: {
sm: { padding: '4', fontSize: '12px' },
lg: { padding: '8', fontSize: '24px' }
}
}
code: using-button.tsx
import { button } from './button'
const Button = () => {
return (
// DOM側がスッキリするのが最高。
<button className={button({ visual: 'solid', size: 'lg' })}>
Click Me
</button>
)
}
code:output.css
// ちゃんとLayerで詳細度縛ってくれているの良い。
@layer utilities {
// あくまで利用されるpropのUtility classが生成されて渡されるので、パフォーマンス的にも良い。
.d_flex {
display: flex;
}
.bg_red_200 {
}
.color_white {
}
.border_width_1px {
border-width: 1px;
}
/* ... */
}
recipesの置き場
componentのDOMの近くにファイルとして置くか?theme/recipes/xxxみたいに置くか？
themeにおいてる
疑問
When dealing with simple use cases, or if you need code colocation, or even avoiding dynamic styling, atomic recipes shine by providing all style variants. Config recipes are preferred for design system components, delivering leaner CSS with only the styles used. Choose according to your component needs.
Project classっぽい概念は、あまりdefineRecipeすることなさそう。